<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>病人管理</el-breadcrumb-item>
      <el-breadcrumb-item>病人标签列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <!-- gutter来设置行内列之间的距离 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入想要查询的病人信息"
            v-model="queryInfo.query"
            clearable
            @clear="LikePatientList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="LikePatientList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAddPage">添加病人信息</el-button>
        </el-col>
      </el-row>
      <el-table :data="PatientList" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名" width="135px"> </el-table-column>
        <el-table-column  prop="idcard" label="身份证号" width="150px"></el-table-column>
        <el-table-column  prop="phone" label="电话号码" width="150px"></el-table-column>
        <el-table-column  label="基本信息标签" width="110px">
          <template slot-scope="scope">
          <el-popover
              placement="right"
              width="250"
              trigger="click"
              @hide="resetMessage">
            <el-table :data="BasicData">
              <el-table-column width="110" property="basicinfo" label="基本信息标签"></el-table-column>
              <el-table-column label="操作" width="100px">
                <template slot-scope="scope">
                  <el-button
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      @click="removeBasicById(scope.row.id)"
                  ></el-button>
                </template>
              </el-table-column>

            </el-table >
            <el-button slot="reference" @click="getPatientBasic(scope.row.id)">查看</el-button>
            <el-col :span="4">
              <el-button type="primary" @click="addBasicLabel(scope.row.id)">绑定标签</el-button>
            </el-col>
          </el-popover>
          </template>
        </el-table-column>
        <el-table-column  label="业务信息标签" width="110px">
          <template slot-scope="scope">
            <el-popover
                placement="right"
                width="250"
                trigger="click"
                @hide="resetMessage">
              <el-table :data="OperationData">
                <el-table-column width="110" prop="operation" label="业务信息标签"></el-table-column>
                <el-table-column label="操作" width="100px">
                  <template slot-scope="scope">
                    <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        @click="removeOperationById(scope.row.id)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button  width="10" slot="reference" @click="getPatientOperation(scope.row.id)">查看</el-button>
              <el-col :span="4">
                <el-button type="primary" @click="addOperationLabel(scope.row.id)">绑定标签</el-button>
              </el-col>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column  label="症状信息标签" width="110px">
          <template slot-scope="scope">
            <el-popover
                placement="right"
                width="250"
                trigger="click"
                @hide="resetMessage">
              <el-table :data="SymptomData">
                <el-table-column width="110" property="symptom" label="症状信息标签"></el-table-column>
                <el-table-column label="操作" width="100px">
                  <template slot-scope="scope">
                    <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        @click="removeSymptomById(scope.row.id)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button slot="reference" @click="getPatient(scope.row.id)">查看</el-button>
              <el-col :span="4">
                <el-button type="primary" @click="addSymptomLabel(scope.row.id)">绑定标签</el-button>
              </el-col>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
                type="primary"
                size="mini"
                @click="show(scope.row.id)"
            >详情</el-button>
            <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="editById(scope.row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeById(scope.row.id)"
            ></el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 15, 25, 30]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>
    <el-dialog
        title="绑定标签"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <div>
        <el-form  label-width="100px">
          <el-form-item label="标签信息">
            <el-select v-model="Basic"  placeholder="请选择基本标签">
              <el-option v-for="item in BasicList"   :label="item.basicinfo" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签截止期限">
            <el-date-picker type="date" v-model="endDate" placeholder="选择日期" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add(Basic,endDate)">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="绑定标签"
        :visible.sync="centerDialogVisible2"
        width="30%"
        center>
      <div>
        <el-form  v-model="OperationList" label-width="100px" class="demo-ruleForm">
          <el-form-item label="标签信息">
            <el-select v-model="Operation"  placeholder="请选择业务标签">
              <el-option v-for="item in OperationList" :label="item.operation" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签截止期限">
            <el-date-picker type="date" v-model="endDate" placeholder="选择日期" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="add(Operation,endDate)">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="绑定标签"
        :visible.sync="centerDialogVisible3"
        width="30%"
        center>
      <div>
        <el-form   label-width="100px" class="demo-ruleForm">
          <el-form-item label="标签信息">
            <el-select v-model="Symptom"  placeholder="请选择症状标签">
              <el-option v-for="item in SymptomList" :label="item.symptom" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签截止期限">
            <el-date-picker type="date" v-model="endDate" placeholder="选择日期" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="add(Symptom,endDate)">确 定</el-button>
  </span>
    </el-dialog>


    <el-dialog
        title="标签展示"
       :visible.sync="centerDialogVisible4"
        width="50%"
        @close="resetMessage"
        center>
      <div>
        <el-card class="box-card">
          <div>姓名：{{PatientData.name}}</div>
          <div>身份证号：{{PatientData.idcard}}</div>
          <div>电话号码：{{PatientData.phone}}</div>
          基本信息：
          <span v-for="item in BasicData">
            {{item.basicinfo}}
          </span>
          <br>
          业务信息：
          <span v-for="item in OperationData">
            {{item.operation}}
          </span>
          <br>
          症状信息：
          <span v-for="item in SymptomData">
            {{item.symptom}}
          </span>
        </el-card>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible4 = false">取 消</el-button>
    <el-button  @click="centerDialogVisible4 = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 请求参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10,
      },

      //病人标签信息
      PatientList: [],
      // 标签类型
      type:'',

      //结束日期
      endDate:'',

      // 数据总条数
      total: 0,
      BasicData:[],
      OperationData:[],
      SymptomData:[],
      PatientData:{
        name:'',
        idcard:'',
        phone:'',
      },

      centerDialogVisible: false,
      centerDialogVisible2: false,
      centerDialogVisible3: false,
      centerDialogVisible4: false,
      BasicList:[],
      Basic:'',
      OperationList:[],
      Operation:'',
      SymptomList:[],
      Symptom:'',

      Rb:{
        pid:0,
        bid:0,
        endDate:''
      },
      Ro:{
        pid:0,
        oid:0,
        endDate:''
      },
      Rs:{
        pid:0,
        sid:0,
        endDate:''
      },

      patient:{
        name:'',
        idcard:'',
        phone:'',
        basic:[],
        operation:[],
        symptom:[],
      },

      RoVO:{
        id:0,
        oid:0
      },
      RbVO:{
        id:0,
        bid:0
      },
      RsVO:{
        id:0,
        sid:0
      }
    }
  },
  created() {
    this.getPatientList()
  },
  methods: {
    //获取所有病人信息
    getPatientList() {
      //病人基本信息
      this.getRequest('/patient/?currentPage='+this.queryInfo.query+'&size='+this.queryInfo.pagesize).then(resp => {
        console.log("这里是病人信息===========")
        console.log(resp.data)
        if (resp) {
          this.PatientList = resp.data;
          this.total = resp.data.length;
        }
      })
    },
    //模糊查询病人信息
    LikePatientList() {
      //病人基本信息
      this.getRequest('/patient/?keyword='+this.queryInfo.query+'&currentPage='+this.queryInfo.pagenum+'&size='+this.queryInfo.pagesize).then(resp => {
        console.log("这里是模糊查询病人信息===========")
        console.log(resp.data)
        if (resp) {
          this.PatientList = resp.data;
          this.total = resp.data.length;
        }
      })
    },
    //根据id获取病人信息
    getPatientById(pid) {
      this.getRequest('/patient/getPatientByid?pid=' + pid).then(resp => {
        console.log("病人基本信息+")
        console.log(resp[0])
        if (resp) {
          this.PatientData = resp[0];
        }
      })
    },
    //获取病人的基本标签信息
    getPatientBasic(id) {
      this.type = "基本信息";
      this.getRequest('/basic/getBasic?id=' + id).then(resp => {
        console.log("这里是基本信息===========")
        console.log(resp[0])
        if (resp) {
          this.RbVO.id = resp[0].id
          this.BasicData = resp[0].basic;
        }
      })
    },
    //获取病人的业务标签信息
    getPatientOperation(id) {
      this.type = "业务信息";
      this.getRequest('/operation/getOperation?id=' + id).then(resp => {
        console.log("这里是业务信息===========")
        console.log(resp[0])
        if (resp) {
          this.RoVO.id = resp[0].id
          this.OperationData = resp[0].operation;
        }
      })
    },
    //获取病人的症状标签信息
    getPatient(id) {
      this.type = "症状信息";
      this.getRequest('/symptom/getPatient/?id=' + id).then(resp => {
        console.log("这是症状信息===========")
        console.log(resp[0])
        if (resp) {
          this.RsVO.id = resp[0].id
          this.SymptomData = resp[0].symptom;
        }
      })
    },
    //为病人绑定标签信息
    add(basic, date) {
      if (this.type === "基本信息") {
        this.Rb.bid = basic;
        this.Rb.endDate = this.formatDateTime(date)
        console.log(basic)
        this.postRequest("/Rb/", this.Rb).then(resp => {
          if (resp) {
            this.$router.go(0)
          } else {
            this.$router.go(0)
          }
        })
      }
      if (this.type === "业务信息") {
        this.Ro.oid = basic;
        this.Ro.endDate = this.formatDateTime(date)
        this.postRequest("/Ro/", this.Ro).then(resp => {
          if (resp) {
            this.$router.go(0)
          } else {
            this.$router.go(0)
          }
        })
      }
      if (this.type === "症状信息") {
        this.Rs.sid = basic;
        this.Rs.endDate = this.formatDateTime(date)
        console.log(this.Rs.endDate)
        console.log(basic)
        this.postRequest("/Rs/", this.Rs).then(resp => {
          if (resp) {
            this.$router.go(0)
          } else {
            this.$router.go(0)
          }
        })
      }
      this.centerDialogVisible = false;
      this.centerDialogVisible2 = false;
      this.centerDialogVisible3 = false;
    },

    //查询基本标签信息
    addBasicLabel(id) {
      this.Rb.pid = id;
      console.log(this.Rb.pid);
      this.centerDialogVisible = true
      this.getRequest('/basic/').then(resp => {
        console.log(resp);
        if (resp) {
          this.BasicList = resp;
        }
      })
    },

    //查询业务标签信息
    addOperationLabel(id) {
      this.Ro.pid = id;
      this.centerDialogVisible2 = true
      this.getRequest('/operation/').then(resp => {
        if (resp) {
          this.OperationList = resp;
        }
      })
    },
    //查询症状标签信息
    addSymptomLabel(id) {
      this.Rs.pid = id;
      this.centerDialogVisible3 = true
      this.getRequest('/symptom/').then(resp => {
        if (resp) {
          this.SymptomList = resp;
        }
      })
    },
    // 页容量发生改变时
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getPatientList()
    },
    // 页码发生变化
    handleCurrentChange(pageNum) {
      this.queryInfo.pagenum = pageNum
      this.getPatientList()
    },
    // 删除标签
    async removeById(id) {
      const result = await this.$confirm('确定要删除这个标签吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (result !== 'confirm') {
        return this.$message.info('已取消该删除操作！')
      } else {

        this.deleteRequest('/patient/' + id).then(resp => {
          if (resp.code == 200) {
            // return this.$message.info('删除成功！')
            this.$router.go(0)
          } else {
            return this.$message.info('删除失败！')
          }
        })
      }
    },
    //删除病人的基本信息
    async removeBasicById(id) {
      const result = await this.$confirm('确定要删除这个标签吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (result !== 'confirm') {
        return this.$message.info('已取消该删除操作！')
      } else {
        this.RbVO.bid = id;
        this.deleteRequest('/Rb/delete', this.RbVO).then(resp => {
          if (resp.code == 200) {
            // return this.$message.info('删除成功！')
            this.$router.go(0)
          } else {
            return this.$message.info('删除失败！')
          }
        })
      }
    },
    //删除病人的业务信息
    async removeOperationById(id) {
      const result = await this.$confirm('确定要删除这个标签吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (result !== 'confirm') {
        return this.$message.info('已取消该删除操作！')
      } else {
        this.RoVO.oid = id;
        this.deleteRequest('/Ro/delete', this.RoVO).then(resp => {
          if (resp.code == 200) {
            // return this.$message.info('删除成功！')
            this.$router.go(0)
          } else {
            return this.$message.info('删除失败！')
          }
        })
      }
    },
    //删除病人的症状信息
    async removeSymptomById(id) {
      const result = await this.$confirm('确定要删除这个标签吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (result !== 'confirm') {
        return this.$message.info('已取消该删除操作！')
      } else {
        this.RsVO.sid = id;
        this.deleteRequest('/Rs/delete', this.RsVO).then(resp => {
          if (resp.code == 200) {
            // return this.$message.info('删除成功！')
            this.$router.go(0)
          } else {
            return this.$message.info('删除失败！')
          }
        })
      }
    },

    // 添加按钮--到添加页面
    goAddPage() {
      this.$router.push('/patient/add')
    },

    // 编辑按钮--存储商品id到原型，跳转到编辑页面
    editById(pid) {
      this.editLabelID.id = pid;

      this.$router.push('/patient/edit')
    },
    //重置
    resetMessage() {
      console.log("进来了")
      this.BasicData = [];
      this.OperationData = [];
      this.SymptomData = [];
      this.PatientData = {};
    },

    //展示详情页
    show(id) {
      this.getPatientById(id);
      this.getPatientBasic(id);
      this.getPatientOperation(id);
      this.getPatient(id);
      this.centerDialogVisible4 = true
    },
    // 中国标准时间 转换成 年月日
    formatDateTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + m + '-' + d
    },
  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>